<!--
 * @Author: 330GRX 617947173@qq.com
 * @Date: 2023-09-28 10:16:32
 * @LastEditors: 330GRX 617947173@qq.com
 * @LastEditTime: 2023-10-02 12:24:01
 * @FilePath: \Realtime-Chat\web\src\components\Contacts.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="contacts-container">
    <div class="brand">
      <img :src="Logo" alt="logo" />
      <h3>VueChat</h3>
    </div>
    <div class="contacts">
      <div class="contact" v-for="(contact, index) in props.contacts" :key="index" @click="changeCurrentChat(index, contact, $event)">
        <div class="avatar">
          <img :src="`data:image/svg+xml;base64,${contact.avatarImage}`" alt="avatar" />
        </div>
        <div class="username">
          <h3>{{ contact.username }}</h3>
        </div>
      </div>
    </div>
    <div class="current-user">
      <div class="avatar">
        <img :src="`data:image/svg+xml;base64,${currentUserImage}`" alt="avatar" />
      </div>
      <div class="username">
        <h2>{{ currentUserName }}</h2>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, watchEffect, onBeforeUnmount } from 'vue'
import { useCurrentChatStore, useCurrentUserStore } from '@/stores/index'
import Logo from '../assets/logo.svg'
// 接收父组件传递过来的contacts对象 会话列表
const props = defineProps({
  contacts: Object
})
// 当前用户用户名
const currentUserName = ref('')
// 当前用户头像
const currentUserImage = ref('')
// 当前选中的用户
const currentSelected = ref(null)
// 当前会话的用户
const currentChatStore = useCurrentChatStore()
// 当前用户
const currentUserStore = useCurrentUserStore()

// watchEffect 也是一个帧听器，是一个副作用函数。
// 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
// 这里监听到currentUserStore.currentUser改变
const stop = watchEffect(() => {
  if (currentUserStore.currentUser) {
    currentUserName.value = currentUserStore.currentUser.username
    currentUserImage.value = currentUserStore.currentUser.avatarImage
  }
}, [currentUserStore.currentUser])
// watchEffect 也是一个帧听器，是一个副作用函数。
// 它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听，组件卸载的时候会停止监听。
// 这里监听到currentChatStore.currentChat改变
const stopChat = watchEffect(() => {
  // 没有选中的会话
  if (!currentChatStore.currentChat) {
    const selectedDom = document.getElementsByClassName('selected')
    if (selectedDom.length !== 0) {
      selectedDom[0].className = 'contact'
    }
  }
}, [currentChatStore.currentChat])
onBeforeUnmount(() => {
  // 停止监听
  stop()
  stopChat()
})

/**
 * @description: 处理选中会话用户改变
 * @param {*} index 当前选中用户的索引
 * @param {*} contact 当前选中用户的信息
 * @param {*} e 事件对象
 */
const changeCurrentChat = (index, contact, e) => {
  let contactDoms
  let contactDom
  if (e.target.parentNode.classList.contains('contacts')) {
    // 点到空白区域
    contactDoms = [...e.target.parentNode.children]
    contactDom = e.target
  } else if (e.target.parentNode.parentNode.parentNode.classList.contains('contacts')) {
    // 点到图片或者名字
    contactDoms = [...e.target.parentNode.parentNode.parentNode.children]
    contactDom = e.target.parentNode.parentNode
  }
  // 排他
  contactDoms.forEach((item) => {
    item.className = 'contact'
  })
  contactDom.classList.add('selected')

  currentSelected.value = index
  currentChatStore.setCurrentChat(contact)
}
</script>

<style lang="scss" scoped>
.contacts-container {
  display: grid;
  grid-template-rows: 10% 75% 15%;
  overflow: hidden;
  border-radius: 1rem 0 0 1rem;
  background-color: #080420;
  .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    img {
      height: 2rem;
    }
    h3 {
      color: white;
      text-transform: uppercase;
    }
  }
  .contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    gap: 0.8rem;
    &::-webkit-scrollbar {
      width: 0.2rem;
      &-thumb {
        // background-color: #ffffff39;
        background-color: rgb(56, 72, 93);
        width: 0.1rem;
        border-radius: 1rem;
      }
    }
    .contact {
      // background-color: #ffffff39;
      background-color: rgb(56, 72, 93);
      min-height: 5rem;
      width: 90%;
      cursor: pointer;
      border-radius: 0.2rem;
      padding: 0.4rem;
      gap: 1rem;
      display: flex;
      align-items: center;
      transition: 0.5s ease-in-out;
      .avatar {
        img {
          height: 3rem;
        }
      }
      .username {
        h3 {
          color: white;
        }
      }
    }
    .selected {
      // background-color: pink;
      background-color: rgb(100, 182, 135);
    }
  }
  .current-user {
    background-color: #0d0d30;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    .avatar {
      img {
        height: 4rem;
        max-inline-size: 100%;
      }
    }
    .username {
      h2 {
        color: white;
      }
    }
    @media screen and (min-width: 720px) and (max-width: 1080px) {
      gap: 0.5rem;
      .username {
        h2 {
          font-size: 1rem;
        }
      }
    }
  }
}
</style>
